<!DOCTYPE html>
<html>
  <head>
    <title>Movie Explorer</title>
    <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    <link href="../css/third_party/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/third_party/bootstrap-select.min.css" rel="stylesheet" media="screen">
    <link href="../css/third_party/darkstrap.css" rel="stylesheet" media="screen">
    <link href="//www.gstatic.com/freebase/suggest/4_2/suggest.min.css" rel="stylesheet" type="text/css">
    <link href="../css/index.css" rel="stylesheet" type="text/css">
    <link href="../img/icon.png" rel="shortcut icon">
  </head>

  <body>
    <div class="navbar navbar-static-top">
      <div class="navbar-inner">
        <div class="container">
          <h1>Movie Explorer</h1>

          <form id="search-details">
            <fieldset>
              <span class="inline-text">Find movies</span>

              <script id="search-pair-template" type="text/x-handlebars">
                <div class="search-pair">
                  <select class="selectpicker">
                    <option value="/film/film/directed_by">directed by</option>
                    <option value="contributor">starring</option>
                    <option value="/film/film/genre">with genre</option>
                    <option value="certification">awarded</option>
                  </select>
                  <input type="text">
                  <input type="hidden">
                </div>
              </script>

              <a id="and" href="#" class="btn btn-inverse">and...</a>
            </fieldset>
          </form>

        </div>
      </div>
    </div>

    <div id="output">
      <div id="message"></div>
      <div id="movies-list" class="thumbnails">
        <script id="movie-template" type="text/x-handlebars">
          {{#each movies}}
            <div class="movie thumbnail">
              {{! See https://developers.google.com/youtube/player_parameters for various player parameters. }}
              <iframe class="player" src="//www.youtube.com/embed/{{this.videoId}}?controls=2"></iframe>
              <a href="//www.freebase.com{{this.mid}}" target="_blank"><h3>{{this.title}}</h3></a>
              <p>{{this.description}}</p>
            </div>
          {{/each}}
        </script>
      </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="//www.gstatic.com/freebase/suggest/4_2/suggest.min.js" type="text/javascript"></script>
    <script src="../js/third_party/handlebars.js" type="text/javascript"></script>
    <script src="../js/third_party/bootstrap.min.js"></script>
    <script src="../js/third_party/bootstrap-select.min.js"></script>
    <script src="../js/constants.js" type="text/javascript"></script>
    <script src="../js/freebase.js" type="text/javascript"></script>
    <script src="../js/youtube.js" type="text/javascript"></script>
    <script src="../js/index.js" type="text/javascript"></script>
    <script src="https://apis.google.com/js/client.js?onload=onJSClientLoad" type="text/javascript"></script>
  </body>
</html>